<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .song-item {
            background: white;
            margin: 10px 0;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .song-info {
            flex: 1;
        }
        .song-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        .song-artist {
            color: #666;
            margin-top: 5px;
        }
        .play-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }
        .play-btn:hover {
            background: #0056b3;
        }
        .play-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .status {
            margin-top: 10px;
            padding: 10px;
            border-radius: 5px;
            background: #e9ecef;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
        }
        .success {
            background: #d4edda;
            color: #155724;
        }
    </style>
</head>
<body>
    <h1>音乐播放测试</h1>
    <p>测试夜曲、青花瓷、七里香这三首歌曲的播放功能</p>
    
    <div class="song-item">
        <div class="song-info">
            <div class="song-title">夜曲</div>
            <div class="song-artist">周杰伦</div>
        </div>
        <button class="play-btn" onclick="playSong('夜曲', 'https://music.163.com/song/media/outer/url?id=185010.mp3')">播放</button>
    </div>
    
    <div class="song-item">
        <div class="song-info">
            <div class="song-title">青花瓷</div>
            <div class="song-artist">周杰伦</div>
        </div>
        <button class="play-btn" onclick="playSong('青花瓷', 'https://music.163.com/song/media/outer/url?id=185009.mp3')">播放</button>
    </div>
    
    <div class="song-item">
        <div class="song-info">
            <div class="song-title">七里香</div>
            <div class="song-artist">周杰伦</div>
        </div>
        <button class="play-btn" onclick="playSong('七里香', 'https://music.163.com/song/media/outer/url?id=185011.mp3')">播放</button>
    </div>
    
    <div id="status" class="status" style="display: none;"></div>
    
    <audio id="audioPlayer" controls style="width: 100%; margin-top: 20px;"></audio>

    <script>
        let currentAudio = null;
        
        function playSong(songName, url) {
            // 停止当前播放
            if (currentAudio) {
                currentAudio.pause();
                currentAudio = null;
            }
            
            const audioPlayer = document.getElementById('audioPlayer');
            const statusDiv = document.getElementById('status');
            
            // 显示状态
            statusDiv.style.display = 'block';
            statusDiv.className = 'status';
            statusDiv.textContent = `正在加载 ${songName}...`;
            
            // 设置音频源
            audioPlayer.src = url;
            currentAudio = audioPlayer;
            
            // 播放音频
            audioPlayer.play().then(() => {
                statusDiv.className = 'status success';
                statusDiv.textContent = `正在播放 ${songName}`;
            }).catch(error => {
                statusDiv.className = 'status error';
                statusDiv.textContent = `播放失败: ${error.message}`;
                console.error('播放失败:', error);
            });
            
            // 监听播放结束
            audioPlayer.onended = () => {
                statusDiv.className = 'status';
                statusDiv.textContent = `${songName} 播放完成`;
            };
            
            // 监听错误
            audioPlayer.onerror = (error) => {
                statusDiv.className = 'status error';
                statusDiv.textContent = `播放错误: 无法加载音频文件`;
                console.error('音频错误:', error);
            };
        }
        
        // 页面加载完成后的提示
        window.onload = () => {
            const statusDiv = document.getElementById('status');
            statusDiv.style.display = 'block';
            statusDiv.textContent = '点击播放按钮测试歌曲播放功能';
        };
    </script>
</body>
</html>

